<li routerLinkActive="active" *ngIf="!menu.hidden" [class.expanded]="expanded">
    <a [routerLink]="menu.url" *ngIf="menu.url && !menu.children">
        <i class="icon text-info-dker {{menu.icon}}" *ngIf="menu.icon"></i>
        <span class="font-bold">{{menu.name}}</span>
    </a>
    <a href="javascript:;" class="auto" *ngIf="menu.children" (click)="onToggleMenu($event, menu)">
        <i class="icon text-info-dker {{menu.icon}}" *ngIf="menu.icon"></i>
        <span class="font-bold">{{menu.name}}</span>
        <span class="pull-right text-muted">
            <i class="fa fa-fw fa-angle-right text"></i>
            <i class="fa fa-fw fa-angle-down text-active"></i>
        </span>
    </a>
    <ul class="nav nav-sub dk" *ngIf="menu.children">
        <li class="nav-sub-header">
            <a href>
                <span>{{menu.name}}</span>
            </a>
        </li>
        <wf-menu-item *ngFor="let submenu of menu.children" [menu]="submenu"></wf-menu-item>
    </ul>
</li>